<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/person/fontawesome/css/font-awesome.css">
    <link rel="stylesheet" href="/css/bookcase.css">

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
	ul{
		padding: 5px;
	}
	
	#bookcase .info div{
		display: inline-block;
		width: 135px;
		text-align: center;
		height: 75px;
	}
	#bookcase .info div button{
		padding: 0 20px;
		height: 36px;
		line-height: 36px;
		color: white;
		background: #409EFF;
		border: none;
	}
</style>

<body>

<div class="head" id="case">
    <div class="headImg">
        <img src="/images/person/home_title_fav.png" alt="">
    </div>
    <div class="item">
        我已收藏 <span>{{total[1]}}</span>部作品
    </div>
  

	<div id="bookcase">
		<ul>
			<li v-for="(item,index) in caseList" :key="index">
				<div class="info">
					<div>
						<span>
							<img class="img-book" :src="'http://localhost:8081/imgs/resource/'+item.resourceId+'/'+item.resourceImg" >
						</span>
					</div>
					<div>
						<span>{{item.resourceName}}</span>
					</div>
					<div>
						<span>跟新到{{item.updateName}} </span>
						<span v-if="item.history!=null">|上次读到:{{item.history.sname}}</span>
					</div>
					<div>
						<span>{{item.updateTime}}</span>
					</div>
					<div>
						<span><button type="button" @click=noCollect(item.resourceId)>取消收藏</button></span>
					</div>
					
				</div>
			</li>
		
		</ul>
	</div>
	

</div>

<script th:inline="javascript">
	var userInfo = [[${session.loginUser}]]
</script>

<script>
    let taglist=new Vue({
        el:"#case",
        data:{
			userId:userInfo.id,
            caseList:[],
			total:''
        },
        methods:{
			noCollect(id){
				let url = "http://localhost:9999/collection/remove"
				// alert(id)
				axios.get(url,{
					params:{
						uid:this.userId,
						rid:id,
					}
				}).then((res)=>{
					if(res.data.code==200){
						alert(res.data.msg)
					}else if(res.data.code==201){
						alert(res.data.msg)
					}
				})
			},
            getuserCase(){
                let url="http://localhost:9999/user/bookcase?id="+this.userId
                axios.get(url).then((resp)=>{
                    this.caseList=resp.data
                })
            },
			getCollectTotalList(){
				let url = 'http://localhost:9999/resource/getPersonCollectTotal'
				axios.get(url,{
					params:{
						uid:this.userId
					}
				}).then((resp)=>{
					this.total=resp.data.data
				})
			},
        },
        created(){
			this.getuserCase()
			this.getCollectTotalList()
        }
    })

</script>
</body>
</html>